<template>
  <Dialog :appDialog="appDialog" @close="closeDialog">
    <div class="dialog-contents">
      <div class="graphic-type">
        <div class="type-item" :class="{'type-active': item.isActive}" v-for="(item, index) in types" :key="item.id" @click="clickType(item, index)">{{item.label}}</div>
      </div>
      <div class="graphic-content">
        <GraphicPublished :multiple="appDialog.multiple" :articleType="appDialog.articleType" @submit="submit" v-if="types[0].isActive" />
        <GraphicDraft :multiple="appDialog.multiple" :articleType="appDialog.articleType" @submit="submit" v-if="types[1].isActive" />
      </div>
    </div>
  </Dialog>
</template>

<script setup lang="tsx">
  import { reactive, ref, onMounted,computed, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import Dialog from '@/components/Dialog.vue'
  import GraphicPublished from '@/components/common/GraphicPublished.vue'
  import GraphicDraft from '@/components/common/GraphicDraft.vue'

  const selectedArr = reactive<any>([])
  let multiple = ref<boolean>(true)
  let articleType = ref<number>(0)
  
  interface Props {
    modelValue: boolean,
    show: boolean,
    multiple: boolean,
    selectedMember: []
  }

  const props = withDefaults(defineProps<Props>(),{
    modelValue: false,
    show: false,
	  multiple: true,
    selectedMember: () => []
	})

  const emit = defineEmits(['update:modelValue', 'update:show', 'submit'])

  const types = reactive<any[]>([
    {
      id: 1,
      label: '已发表',
      isActive: true
    },
    {
      id: 2,
      label: '草稿',
      isActive: false
    }
  ])

  const clickType = (item:any, index:number)=>{
    types.forEach(ite=>{
      ite.isActive = false
    })
    types[index].isActive = true
  }

  const submit = (arr:any)=>{
    selectedArr.splice(0)
    selectedArr.push(...arr)
  }

  // 取消
  const cancelHandel = ():void => {
    appDialog.visible = false
  }
  //确定
  const submitHandel = ():void => {
    emit('submit', selectedArr)
    cancelHandel()
  }
  const appDialog = reactive({
    visible: false,
    title: '选择已有图文',
    width: '900px',
    multiple: true,
    articleType: 0,
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
  })

  watch(()=>appDialog.visible, (val:boolean)=>{
    emit('update:show', val)
  }, {deep: true, immediate: true})
  watch(()=>props.show, (val:boolean)=>{
    appDialog.visible = val
  }, {deep: true, immediate: true})

  defineExpose({
    appDialog,
    multiple

  })
</script>

<style lang="scss" scoped>

  .el-dialog{
    .el-dialog__body{
      padding-top: 0;
    }
  }
  .dialog-contents{
    display: flex;


    .graphic-type{
      flex: 1;
      border-right: 1px solid #ddd;
      padding-right: 20px;
      margin-right: 18px;
      .type-item{
        text-align: center;
        color: #555;
        line-height: 2.2;
        &:hover{
          color: #FF6B00;
          cursor: pointer;
        }
      }
      .type-active{
        color: #FF6B00;
      }
    }
    .graphic-content{
      width: 760px;

      
      
    }
  }



</style>
